import type { App } from 'vue'
import moment from 'moment'
import { intersection } from 'lodash-es'
import { commonStore } from '@/store'

export default (app: App) => {
  // 权限指令，store.state.identity为接口返回的身份权限
  // binding.value为该btn自身的身份权限
  // 当两个数组有交集时说明该登录的身份符合按钮的显示条件
  const store = commonStore()
  app.directive('permission', {
    mounted(el, binding) {
      if (binding.value?.length) {
        const isShow = intersection(binding.value, store.identity)?.length
        el.style.display = isShow ? '' : 'none'
      }
    },
  })
  app.directive('time', {
    mounted(el, binding) {
      const time = moment(el.textContent.ISO_8601).format('YY-MM-DD')
      el.textContent = time
    },
  })
  app.directive('focus', {
    // 当被绑定的元素插入到 DOM 中时……
    mounted(el) {
      // 聚焦元素
      el.focus() // 页面加载完成之后自动让输入框获取到焦点的小功能
    },
  })
}
